<template>
  <view>
    <view class="top">
      <view class="title">取消原因</view>
      <view>请告诉我们您取消订单的的原因，帮助我们后续完善</view>
      <view class="c-flex"> 万分<view class="c-red">感激</view>呦 </view>
    </view>
    <view class="itemBox">
      <u-cell-group>
        <u-cell-item
          :title="item.title"
          :arrow="false"
          @click.native="activeClick(item)"
          v-for="item in data"
          :key="item.id"
        >
          <u-icon
            name="checkmark-circle-fill"
            color="#F3651F"
            size="28"
            v-if="active == item.id ? true : false"
          ></u-icon>
        </u-cell-item>
      </u-cell-group>
    </view>
    <SaveButton text="提交退款原因" @navTo="save()" />
  </view>
</template>

<script>
import SaveButton from '@/commponents/public/button/SaveButton'
export default {
  components: {
    SaveButton
  },
  data() {
    return {
      data: [
        {
          title: '不喜欢/不满意/效果差',
          id: '1'
        },
        {
          title: '拍错了',
          id: '2'
        },
        {
          title: '卖家发错货',
          id: '3'
        },
        {
          title: '商品与描述不符',
          id: '4'
        },
        {
          title: '做工粗糙有瑕疵',
          id: '5'
        },
        {
          title: '假冒品牌',
          id: '6'
        },
        {
          title: '其他',
          id: '7'
        }
      ],
      active: '1',
      text: '个人设置'
    }
  },
  methods: {
    activeClick(item) {
      this.active = item.id
      this.text = item.title
      wx.setStorageSync('causeText', this.text)
    },
    save() {
      wx.navigateBack(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 50rpx;
  color: #000;
  font-weight: 600;
}
.top > view {
  margin-bottom: 20rpx;
}
.top,
.itemBox {
  padding: 0 30rpx;
}
u-cell-group {
  /deep/ .u-cell {
    padding: 10rpx 0;
    border-bottom: 1px solid #f2f3f7;
  }
}
</style>
